<template>
  <div>
    <iframe :src="url" style="width: 100%; height: auto" />
  </div>
</template>
<style>

</style>
<script>
export default{
  // 使用时请使用 :url.sync=""传值
  name: 'HtmlPanel',
  props: {
    url: {
      required: true,
      type: String,
      default: 'www.baidu.com'
    }
  },
  data() {
    return {
      loading: false,
      html: ''
    }
  },
  watch: {
    url: function(value) {
      this.load(value)
    }
  },
  mounted() {
    this.load(this.url)
  }
  // methods: {
  //   load(url) {
  //     if (url && url.length > 0) {
  //       // 加载中
  //       this.loading = true
  //       const param = {
  //         accept: 'text/html, text/plain'
  //       }
  //       console.log(url)
  //       request({
  //         url: url,
  //         method: 'get'
  //       }).then((response) => {
  //         this.loading = false
  //         // 处理HTML显示
  //         this.html = response.data
  //       }).catch(() => {
  //         this.loading = false
  //         this.html = '加载失败'
  //       })
  //     }
  //   }
  // }
}
</script>
